<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行家 - 注册/登录</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background: url('https://images.unsplash.com/photo-1506929562872-bb421503ef21') no-repeat center center fixed;
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: #333;
        }
        .container {
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            width: 400px;
            max-width: 90%;
            padding: 30px;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }
        input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        input:focus {
            outline: none;
            border-color: #3498db;
        }
        .avatar-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .avatar-option {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s;
        }
        .avatar-option:hover {
            transform: scale(1.1);
        }
        .avatar-option.selected {
            border-color: #3498db;
        }
        .verification-code {
            display: flex;
        }
        .verification-code input {
            flex: 1;
            margin-right: 10px;
        }
        .verification-code button {
            padding: 10px 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .verification-code button:hover {
            background-color: #2980b9;
        }
        .verification-code button:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }
        .submit-btn {
            width: 100%;
            padding: 12px;
            background-color: #2ecc71;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .submit-btn:hover {
            background-color: #27ae60;
        }
        .error-message {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        .success-message {
            color: #2ecc71;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        .tab-container {
            display: flex;
            margin-bottom: 20px;
        }
        .tab {
            flex: 1;
            text-align: center;
            padding: 10px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        .tab.active {
            border-bottom: 2px solid #3498db;
            font-weight: bold;
        }
        .form-section {
            display: none;
        }
        .form-section.active {
            display: block;
        }
        .password-strength {
            height: 5px;
            background-color: #ecf0f1;
            margin-top: 5px;
            border-radius: 5px;
            overflow: hidden;
        }
        .password-strength-bar {
            height: 100%;
            width: 0%;
            transition: width 0.3s, background-color 0.3s;
        }
        .captcha-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
    </style>

</head>
<body>
<div class="container" id="app">
    <h1>旅行家</h1>

    <div class="tab-container">
        <div class="tab" :class="{active: activeTab === 'register'}" @click="switchTab('register')">注册</div>
        <div class="tab" :class="{active: activeTab === 'login'}" @click="switchTab('login')">登录</div>
    </div>

<!--    <div class="tab-container">-->
<!--        <div class="tab active" data-tab="register">注册</div>-->
<!--        <div class="tab" data-tab="login">登录</div>-->
<!--    </div>-->

    <!-- 注册表单 -->
    <div class="form-section" :class="{active: activeTab === 'register'}">
<!--    <div class="form-section active" id="register-form">-->
        <div class="form-group">
            <label>选择头像</label>
            <div class="avatar-container">
                <img src="img/boy1.png" class="avatar-option selected" data-avatar="1">
                <img src="img/boy2.png" class="avatar-option" data-avatar="2">
                <img src="img/girl1.png" class="avatar-option" data-avatar="3">
                <img src="img/girl2.png" class="avatar-option" data-avatar="4">
            </div>
            <input type="hidden" id="avatar" value="1">
        </div>

        <div class="form-group">
            <label for="username">用户名</label>
            <input v-model="registerForm.username" id="username" placeholder="请输入您的用户名">
            <div class="error-message" id="username-error"></div>
        </div>

        <div class="form-group">
            <label for="account">账号</label>
            <input v-model="registerForm.account" id="account" placeholder="请输入账号(不能包含空格、斜杠或下划线)">
            <div class="error-message" id="account-error"></div>
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input v-model="registerForm.password" id="password" placeholder="请输入密码">
            <div class="password-strength">
                <div class="password-strength-bar" id="password-strength-bar"></div>
            </div>
            <div class="error-message" id="password-error"></div>
        </div>

        <div class="form-group">
            <label for="email">邮箱</label>
            <input v-model="registerForm.email" id="email" placeholder="请输入您的邮箱">
            <div class="error-message" id="email-error"></div>
        </div>

        <div class="form-group">
            <label>邮箱验证码</label>
            <div class="verification-code">
                <input type="text" v-model="registerForm.verificationCode" placeholder="请输入验证码">
                <button id="send-code">发送验证码</button>
            </div>
            <div class="error-message" id="code-error"></div>
            <div class="success-message" id="code-success"></div>
        </div>

        <button class="submit-btn" @click="register">注册</button>
    </div>

    <!-- 登录表单 -->
    <div class="form-section" :class="{active: activeTab === 'login'}">
        <!--    <div class="form-section active" id="register-form">-->
<!--    <div class="form-section" id="login-form">-->
        <div class="form-group">
            <label>账号</label>
            <input type="text" v-model="loginForm.account" placeholder="请输入您的账号">
            <div class="error-message" id="login-account-error"></div>
        </div>

        <div class="form-group">
            <label>密码</label>
            <input type="text" v-model="loginForm.password" placeholder="请输入密码">
            <div class="error-message" id="login-password-error"></div>
        </div>

        <!-- 验证码 -->
        <div class="form-group">
            <label>验证码:</label>
            <div class="captcha-container">
                <input v-model="loginForm.captcha" type="text" class="form-control" placeholder="请输入验证码" style="width: 100px;">
                <img :src="captchaUrl" @click="refreshCaptcha" class="captcha-img"
                 :title="'点击刷新验证码'">
                <div class="error-message" id="login-captcha-error"></div>
            </div>
        </div>

        <button class="submit-btn" @click="login">登录</button>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            // 表单数据
            activeTab: 'register',
            avatar: '1',
            registerForm: {
                username: '',
                account: '',
                password: '',
                email: '',
                verificationCode: ''
            },
            loginForm: {
                account: '',
                password: '',
                captcha: ''
            },
            captchaUrl: '/api/captcha?' + Math.random(),
            // 其他数据...
        },
        methods: {
            // 切换标签
            switchTab(tab) {
                this.activeTab = tab;
            },

            // 选择头像
            selectAvatar(avatar) {
                this.avatar = avatar;
            },

            // 刷新验证码
            refreshCaptcha() {
                this.captchaUrl = '/api/captcha?' + Math.random();
            },
            submitForm() {
                axios.post('/api/login', {
                    username: this.username,
                    password: this.password,
                    captcha: this.captcha
                }).then(response => {
                    alert(response.data.message);
                    if (response.data.success) {
                        // 登录成功处理
                    } else {
                        this.refreshCaptcha();
                        this.captcha = '';
                    }
                }).catch(error => {
                    alert('请求失败');
                    this.refreshCaptcha();
                });
            },

            // 发送验证码
            sendVerificationCode() {
                // 实现发送验证码逻辑
            },

            // 注册
            register() {
                // 实现注册逻辑
            },

            // 登录
            login() {
                // 实现登录逻辑
            }
        }
    });
</script>
</body>
</html>